import React, { useState } from 'react';
import './design_left.css';
import Drawer from './Drawer';
import Images from "../Sfolder/images.tsx"

import Template from './Template.tsx';
import Source_material from './source_material.tsx';
import Text from './text.tsx';
import Backcloth from './backcloth/backcloth.tsx'
/**
 * DesignLeft 组件
 * 该组件用于实现设计界面的左侧栏，包含可切换的标签页和相应的内容展示区域
 */
const DesignLeft: React.FC = () => {
    // 控制侧边栏的打开与关闭状态，默认为打开
    const [isOpen, setIsOpen] = useState(true);
    // 当前选中的标签页索引，默认为第一页
    const [activeTab, setActiveTab] = useState(0);

    /**
     * 切换侧边栏的打开与关闭状态
     */
    const toggleDrawer = () => {
        setIsOpen(!isOpen);
    };

    // 定义标签页的列表，每个标签页有文本和图标
    const items = [
        { text: '模版', icon: 'icon-mobanguanli' },
        { text: '文字', icon: 'icon-wenzi' },
        { text: '3D文字', icon: 'icon-moban' },
        { text: '素材', icon: 'icon-sucai' },
        { text: '图片', icon: 'icon-tupian' },
        { text: '背景', icon: 'icon-beijing' },
        { text: '二维码', icon: 'icon-qrcode-1-copy' },
        { text: '上传', icon: 'icon-shangchuan' }
    ];

    /**
     * 根据选中的标签页渲染对应的内容
     * @returns {JSX.Element} 当前选中标签页的内容组件
     */
    const renderContent = () => {
        switch (activeTab) {
            case 0: return <Template />;
            case 1: return <Text />;
            case 2: return <div>3D文字内容</div>;
            case 3: return <Source_material />;
            case 4: return <Images />;
            case 5: return <Backcloth />;
            case 6: return <div>二维码内容</div>;
            case 7: return <div>上传内容</div>;
            default: return null;
        }
    };

    // 渲染左侧栏组件，包含侧边栏和标签页列表
    return (
        <div className='FatherBox'>
            <Drawer isOpen={isOpen} onClose={toggleDrawer} content={renderContent()} />
            
            <ul className='design_left_left'>
                {items.map((item, index) => (
                    <li 
                        key={index} 
                        className={activeTab === index ? 'active' : ''} // 当前选中的标签页会高亮显示
                        onClick={() => {
                            setActiveTab(index);
                        }}
                    >
                        <i className={`iconfont ${item.icon}`}></i>
                        <p>{item.text}</p>
                    </li>
                ))}
            </ul>

             <li className='positioning' onClick={toggleDrawer}>
                <i className='iconfont icon-liwu'></i>
                <p>联系客服</p>
            </li>
        </div>
    );
};

export default DesignLeft;